<template>
  <header class="header-container">
    <!-- 左侧Logo和标题 -->
    <div class="logo-section">
      <div class="logo">
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="32" height="32" rx="8" fill="#646CFF"/>
          <text x="16" y="21" font-size="14" font-weight="bold" text-anchor="middle" fill="white">VN</text>
        </svg>
      </div>
      <h1 class="title">{{ title }}</h1>
    </div>

    <!-- 中间导航链接 -->
    <nav class="nav-section">
      <ul class="nav-links">
        <li v-for="link in navLinks" :key="link.id" class="nav-item">
          <a :href="link.href" class="nav-link">{{ link.text }}</a>
        </li>
      </ul>
    </nav>

    <!-- 右侧用户菜单 -->
    <div class="user-section">
      <button class="user-menu-button" @click="toggleUserMenu">
        <div class="user-avatar">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="16" cy="12" r="8" fill="#535BF2"/>
            <path d="M28 30C28 26.6863 22.5 24 16 24C9.5 24 4 26.6863 4 30" stroke="#535BF2" stroke-width="3" stroke-linecap="round"/>
          </svg>
        </div>
        <span class="user-name">{{ userName }}</span>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      
      <!-- 用户下拉菜单 -->
      <div v-if="showUserMenu" class="user-dropdown">
        <a href="#profile" class="dropdown-item">个人资料</a>
        <a href="#settings" class="dropdown-item">设置</a>
        <a href="#logout" class="dropdown-item logout">退出登录</a>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 组件属性
const props = defineProps<{
  title?: string;
  userName?: string;
  navLinks?: Array<{
    id: string;
    text: string;
    href: string;
  }>;
}>();

// 默认值
const title = props.title || 'Vue Navigation';
const userName = props.userName || '用户名';
const navLinks = props.navLinks || [
  { id: 'home', text: '首页', href: '#' },
  { id: 'products', text: '产品', href: '#products' },
  { id: 'services', text: '服务', href: '#services' },
  { id: 'about', text: '关于我们', href: '#about' },
  { id: 'contact', text: '联系我们', href: '#contact' }
];

// 用户菜单状态
const showUserMenu = ref(false);

// 切换用户菜单显示状态
const toggleUserMenu = () => {
  showUserMenu.value = !showUserMenu.value;
};

// 点击外部关闭菜单
const handleClickOutside = (event: MouseEvent) => {
  const target = event.target as HTMLElement;
  if (!target.closest('.user-section')) {
    showUserMenu.value = false;
  }
};

// 添加点击事件监听器
import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  document.addEventListener('click', handleClickOutside);
});

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
});
</script>

<style scoped>
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  color: #333333;
  padding: 0 24px;
  height: 64px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* 左侧Logo和标题 */
.logo-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

/* 中间导航链接 */
.nav-section {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
}

.nav-link {
  color: #333333;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 8px 0;
  position: relative;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #646CFF;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #646CFF;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* 右侧用户菜单 */
.user-section {
  position: relative;
}

.user-menu-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: #333333;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.user-menu-button:hover {
  background-color: #f5f5f5;
}

.user-name {
  font-weight: 500;
}

.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  min-width: 160px;
  z-index: 1001;
}

.dropdown-item {
  display: block;
  padding: 12px 16px;
  color: #333333;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
}

.dropdown-item.logout {
  color: #e74c3c;
}

.dropdown-item.logout:hover {
  background-color: #ffebee;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-container {
    padding: 0 16px;
  }
  
  .nav-section {
    display: none;
  }
  
  .title {
    font-size: 18px;
  }
}
</style>